var OrderTemplateSetting = function () {
  var template = /* html */ `
    <div class="order-template-setting" v-loading.fullscreen.lock="loading">
      <form-group group-title="纸张大小">
        <div class="setting-form-item clearfix" style="width:350px;">
          <label>纸张尺寸</label>
          <div>
            <el-select class="setting-form-input" v-model="size.type" size="medium">
              <el-option v-for="sizeType in sizeTypeList" :key="sizeType.value" :label="sizeType.label" :value="sizeType.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="setting-form-item clearfix" style="width:350px;">
          <label>纸张布局</label>
          <div>
            <el-select class="setting-form-input" v-model="size.direction" size="medium">
              <el-option v-for="direction in directionList" :key="direction.value" :label="direction.label" :value="direction.value">
              </el-option>
            </el-select>
          </div>
        </div>

        <template v-if="size.type==='default'">
        <div class="setting-form-item clearfix">
          <label>单位</label>
          <div>
            <el-select class="setting-form-input" v-model="size.unit" size="medium">
              <el-option v-for="unit in unitList" :key="unit.value" :label="unit.label" :value="unit.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="setting-form-item clearfix">
          <label>宽*高</label>
          <div>
            <el-input-number class="setting-form-input" v-model="size.width" size="medium" controls-position="right" :min="0" 
              :is-decimal-zero="true" :precision="config.getSizePrecision()" :after-change-format-value="formatNumber"></el-input-number>
            <span>*</span>
            <el-input-number class="setting-form-input" v-model="size.height" size="medium" controls-position="right" :min="0" 
              :is-decimal-zero="true" :precision="config.getSizePrecision()" :after-change-format-value="formatNumber"></el-input-number>
          </div>
        </div>
        </template>
      </form-group>
      <form-group group-title="字号设置" style="margin-top:10px;">
        <div class="setting-form-item clearfix">
          <label>标题字号</label>
          <div>
            <font-size-input inputClass="setting-form-input" v-model="textSize.titleSize" size="medium" :min="12" :max="40"
              :preview-text="titlePreviewText"></font-size-input>
          </div>
        </div>
        <div class="setting-form-item clearfix">
          <label>表格字号</label>
          <div>
            <font-size-input inputClass="setting-form-input" v-model="textSize.tableSize" size="medium" :min="12" :max="20"
              preview-text="物料名称"></font-size-input>
          </div>
        </div>
        <div class="setting-form-item clearfix">
          <label>其他字号</label>
          <div>
            <font-size-input inputClass="setting-form-input" v-model="textSize.otherSize" size="medium" :min="12" :max="25">
            </font-size-input>
          </div>
        </div>
      </form-group>
      <slot name="table-before"></slot>
      <form-group group-title="表格设置" style="margin-top:10px;">
        <slot name="table"></slot>
      </form-group>
      <form-group group-title="其他设置" style="margin-top:10px;">
        <slot name="other-prepend" :config="config"></slot>
        <div class="setting-form-item clearfix" v-if="hasClause">
          <div style="float:none;">
            <span>{{clauseTitle}}</span>
            <el-button size="medium" @click="editClause">编辑</el-button>
          </div>
          <div style="float:none;margin-top:5px;">
            <rich-editor v-model="config.clauseContent" :disabled="true"></rich-editor>
          </div>
        </div>
        <slot name="other-append" :config="config"></slot>
      </form-group>
      <div style="text-align:center;margin-top:20px;">
        <slot name="btns">
          <el-button type="primary" size="medium" @click="save">保存</el-button>
        </slot>
      </div>

      <el-dialog fullscreen class="dialog-fullscreen" title="编辑条款" :visible.sync="openClauseEdit" @closed="clauseText=''">
        <div style="height:100%;overflow:auto;padding:0 10px;">
          <rich-editor v-if="openClauseEdit" v-model="clauseText" ref="richEditor">
            <template slot="append">
              <el-button type="primary" size="medium" @click="toEditText">确定</el-button>
            </template>
          </rich-editor>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      hasClause: {
        type: Boolean,
        default: true
      },
      clauseTitle: {
        type: String,
        default: '条款内容'
      },
      titlePreviewText: {
        type: String,
        default: '标题'
      }
    },

    watch: {
      'size.type': function () {
        this.config.resetPageSize();
      }
    },

    data: function () {
      return {
        loading: false,
        sizeTypeList: i18n.getDropDown('templateSetting.pageSize'),
        unitList: i18n.getDropDown('templateSetting.sizeUnit', ['px', 'mm', 'cm']),
        directionList: i18n.getDropDown('templateSetting.direction', ['vertical', 'horizontal']),
        size: this.config.size,
        textSize: this.config.textSize,
        openClauseEdit: false,
        clauseText: ''
      };
    },

    methods: {
      save: function () {
        this.$emit('save-click', this.config);
      },

      editClause: function () {
        this.clauseText = this.config.clauseContent;
        this.openClauseEdit = true;
      },

      toEditText: function () {
        this.loading = true;
        var self = this;
        this.$refs.richEditor.calContent().then(function () {
          self.loading = false;
          self.toSaveClauseText();
        }).catch(function () {
          self.loading = false;
        });
      },

      toSaveClauseText: function () {
        this.config.clauseContent = this.clauseText;
        this.openClauseEdit = false;
      },

      formatNumber: function (value) {
        return value !== undefined;
      }
    },

    components: {
      FormGroup: FormGroup,
      FontSizeInput: FontSizeInput,
      RichEditor: RichEditor
    },

    template: template
  };
}();
